
<!DOCTYPE html>
<html >
<body><h1>my svg </h1>
 <svg id="svg" class="sunflower"version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<style type="text/css">
	.st1{fill:orange;}
	.st2{fill:none;stroke:seagreen;stroke-width:6;stroke-linecap:round;stroke-miterlimit:5;}
	.st3 
		{
		fill:red;
		animation:myfirst 5s;
		-moz-animation:myfirst 5s; /* Firefox */
		-webkit-animation:myfirst 5s; /* Safari and Chrome */
		-o-animation:myfirst 5s; /* Opera */
		}

		@keyframes myfirsts
		{
		0%   {fill:red;}
		25%  {fill:yellow;}
		50%  {fill:blue;}
		100% {fill:green;}
		}

		@-moz-keyframes myfirst /* Firefox */
		{
		0%   {fill:red;}
		25%  {fill:yellow;}
		50%  {fill:blue;}
		100% {fill:green;}
		}

		@-webkit-keyframes myfirst /* Safari and Chrome */
		{
		0%   {fill:red;}
		25%  {fill:yellow;}
		50%  {fill:blue;}
		100% {fill:green;}
		}

		@-o-keyframes myfirst /* Opera */
		{
		0%   {fill:red;}
		25%  {fill:yellow;}
		50%  {fill:blue;}
		100% {fill:green;}
		}
		}
	.st4{fill:green;}
	.st8{fill:orange;}
	.st5{display:none;fill:#5C234E;stroke:#5C234E;stroke-miterlimit:2.5;}
	.st6{display:none;}
	.st7{display:inline;fill:none;stroke:greenyellow;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
    .st15 {stroke-width:8;}
    .st9{display:inline;fill:none;stroke:greenyellow;stroke-width:6;stroke-miterlimit:10;}
	.st18{fill:greenyellow;}
	.st19{fill:blue;}
    .st21{fill:#e49a05; opacity:0.5}
	div

</style>
<defs>
</defs>
<path id="tige" class="st2 st15" d="M300.8,398.4c0,0,2.1-60.3,1.7-80.3c-0.5-23-6.2-92-6.2-92"/>
<g id="head">
	<g>
		<g>
			<path class="st3" d="M334,163.8c-1.2-0.3-2.5-0.6-3.7-0.8c0.9-0.9,1.8-1.7,2.7-2.7c13.3-14,18.2-30.9,11.1-37.8
				c-7.2-6.9-23.8-1.2-37.1,12.8c-0.9,0.9-1.7,1.9-2.5,2.8c-0.3-1.2-0.6-2.5-1-3.7c-5.4-18.5-17.5-31.3-27-28.5
				c-9.5,2.8-12.9,20.1-7.6,38.6c0.4,1.2,0.8,2.4,1.2,3.6c-1.2-0.4-2.4-0.7-3.7-1c-18.7-4.6-35.7-0.4-38.1,9.3s10.8,21.3,29.5,25.9
				c1.2,0.3,2.5,0.6,3.7,0.8c-0.9,0.9-1.8,1.7-2.7,2.7c-13.3,14-18.2,30.9-11.1,37.8c7.2,6.9,23.8,1.2,37.1-12.8
				c0.9-0.9,1.7-1.9,2.5-2.8c0.3,1.2,0.6,2.5,1,3.7c5.4,18.5,17.5,31.3,27,28.5c9.5-2.8,12.9-20.1,7.6-38.6
				c-0.4-1.2-0.8-2.4-1.2-3.6c1.2,0.4,2.4,0.7,3.7,1c18.7,4.6,35.7,0.4,38.1-9.3C365.8,180,352.6,168.4,334,163.8z"/>
		
		</g>
		<g id="face-group">
			<ellipse transform="matrix(0.3765 -0.9264 0.9264 0.3765 23.0697 382.7565)" class="st8" cx="295.9" cy="174.2" rx="38.2" ry="38.2"/>
			<g id="face">
				<path id="mouth-happy" class="st10" d="M307.5,188.6c0,5.1-5.1,9.3-11.4,9.3c-6.3,0-11.4-4.1-11.4-9.3"/>
			</g>
				<g id="eyes-happy" class="st10">
					<path id="eye-left_5_" d="M305.1,166.1c0-2.5,2.5-4.6,5.6-4.6c3.1,0,5.7,2.1,5.7,4.6"/>
					<path id="eye-right_7_"  d="M275.4,166.1c0-2.5,2.5-4.6,5.6-4.6s5.7,2.1,5.7,4.6"
					/>
				</g>
				
			</g>
	</g>
</g>
<g id="leaf-group-2">
	<line  id="leaf-stem-2"  class="st4" x1="300" y1="293.8" x2="287.2" y2="287"/>
	<g id="leaf-2">
		<path class="st18" d="M224.1,259.6c0,0,22.7-9.3,43.5-2.9c17.6,5.4,27.8,20.5,23.7,30.8c-4,10.3-22.2,15.5-38.3,6.6
			C233.7,283.6,224.1,259.6,224.1,259.6z"/>
		<path class="st19" d="M287.5,287.2c0,0-3.2-1.9-8.1-4.7c-1.2-0.7-2.5-1.4-3.9-2.2c-1.4-0.8-2.9-1.5-4.4-2.4
			c-1.5-0.8-3.2-1.6-4.8-2.4c-1.6-0.8-3.3-1.5-5-2.3c-0.8-0.3-1.7-0.7-2.6-1c-0.9-0.3-1.7-0.6-2.6-0.9c-1.7-0.6-3.4-1.1-5.1-1.6
			c-1.7-0.5-3.3-0.9-4.8-1.4c-1.5-0.4-3-0.8-4.4-1.1c-5.4-1.4-9.1-2.3-9.1-2.3s0.2,0,0.7,0.1c0.4,0,1.1,0.1,1.9,0.2
			c1.6,0.2,4,0.4,6.7,0.9c1.4,0.2,2.9,0.5,4.5,0.8c1.6,0.3,3.2,0.7,4.9,1.1c1.7,0.4,3.5,0.9,5.2,1.5c0.9,0.3,1.8,0.6,2.7,0.9
			c0.9,0.3,1.7,0.7,2.6,1c1.7,0.8,3.4,1.5,5.1,2.4c1.7,0.8,3.2,1.7,4.8,2.6c3.1,1.7,5.8,3.5,8.1,5.1
			C284.7,284.7,287.5,287.2,287.5,287.2z"/>
	</g>
</g>
</g>
<g id="leaf-group-4">
	<line id="leaf-stem-4" class="st4" x1="303" y1="358.1" x2="312.6" y2="351.2"/>
	<g id="leaf-4">
		<path class="st18" d="M378.2,317.7c0,0-7.7,23.2-26.2,34.9c-15.6,9.8-33.6,7.7-38.8-2.1s2.7-26.9,20-33.4
			C353.8,309.3,378.2,317.7,378.2,317.7z"/>
		<path class="st19" d="M369.2,323.2c0,0-3.6,1.1-8.9,2.8c-1.3,0.4-2.8,0.9-4.3,1.4c-1.5,0.5-3.1,1.1-4.7,1.7c-1.6,0.6-3.3,1.3-5,2
					c-1.7,0.7-3.4,1.4-5,2.2c-0.8,0.4-1.7,0.8-2.5,1.2c-0.8,0.4-1.6,0.8-2.4,1.3c-1.6,0.9-3.1,1.8-4.6,2.7c-1.5,0.9-2.9,1.8-4.2,2.7
					c-1.3,0.9-2.6,1.7-3.8,2.5c-4.6,3.1-7.7,5.2-7.7,5.2s0.2-0.2,0.5-0.5c0.3-0.3,0.8-0.7,1.4-1.3c1.2-1.1,3-2.6,5.2-4.4
					c1.1-0.9,2.3-1.8,3.6-2.8c1.3-1,2.7-2,4.1-2.9c1.5-1,3-2,4.6-2.9c0.8-0.5,1.6-0.9,2.5-1.4c0.8-0.5,1.6-0.8,2.5-1.3
					c1.7-0.8,3.5-1.5,5.2-2.2c1.7-0.7,3.4-1.3,5.1-1.8c3.3-1.1,6.5-1.9,9.2-2.6C365.5,323.6,369.2,323.2,369.2,323.2z"/>
	</g>
</svg>
<svg width="100%" height="50%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<g transform="translate(100,100)"> 
<text id="TextElement" x="-50" y="-50" style="font-family:Verdana;font-size:18; visibility:hidden;color: #FF0000;"> It's sunflower
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
<animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/> 
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/> 
</text> 
	
</body>
</html>
